import React, { Component } from 'react';
import { Form, Row, Col, Icon } from 'antd';
import ShowType from '../../../routes/common/showType';
import * as commonFunc from '../../Common/commonFunc';
import styles from '../../../index.less';
import * as config from '../../../utils/config';

const FormItem = Form.Item;

class TabMainTableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      sId: props.sId, /* 业务数据Id */
      dataList: [], /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sCustomerId: '', /* 客户(*) */
      sContacts: '', /* 联系人 */
      sPhone: '', /* 电话 */
      sManualNo: '', /* 手工单号 */
      sWareHouseId: '', /* 仓库名称 */
      sBillNo: '', /* 单据编号 */
      tCreateDate: '', /* 制单日期 */
      sMakePerson: '', /* 制单人 */
      tDeliverDate: '', /* 送货日期 */
      sSenderId: '', /* 送货人 */
      sSalesManId: '', /* 销售员 */
      sGetPayId: '', /* 付款方式 */
      tGetPayDate: '', /* 结算日期 */
      sCurrency: '', /* 币别 */
      dCurrencyRate: '', /* 汇率 */
      sMemo: '', /* 备注 */
      dAccountReceivable: '', /* 应收款-伪字段 */
      sDeliverId: '', /* 送货方式 */
      sDeliverTo: '', /* 送货到 */
      sConsignee: '', /* 收货人 */
      sConsigneeMobile: '', /* 收货人手机 */
      sLogisticsId: '', /* 物流公司 */
      sLogisticsNo: '', /* 物流单号 */
      sLogisticsMobile: '', /* 手机 */
      reserveContent: '',
      expand: false,
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const {
      masterConfig, sActiveId, sId, componentName, sTabId,
    } = this.state;
    const { dispatch } = this.props;
    if (sId !== undefined && sId !== '') {
      const mainId = masterConfig.sId;
      /* 表Id */
      const value = { sId, pageSize: '', pageNum: '' };
      /* 业务数据Id */
      const dataUrl = `${config.server_host}business/getBusinessDataByFormcustomId/${mainId}?sModelsId=${sActiveId}`;
      dispatch({
        type: 'content/getUrlPostData',
        payload: {
          url: dataUrl, sTabId, componentName, value, formRoute: '/saldelivergoodsmaster', returnType: 'data',
        },
      });
    } else if (sId === '' && this.props.newIdFlag) {
      const url = `${config.server_host}getUuid/${this.props.newIdlength}`;
      dispatch({
        type: 'content/getCopyDataId',
        payload: {
          sTabId, url, formRoute: '/saldelivergoodsmaster', componentName,
        },
      });
    }
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sCustomerId: mainConfig.filter(item => (item.sName.toLowerCase() === 'scustomerid'))[0],
        sContacts: mainConfig.filter(item => (item.sName.toLowerCase() === 'scontacts'))[0],
        sPhone: mainConfig.filter(item => (item.sName.toLowerCase() === 'sphone'))[0],
        sManualNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'smanualno'))[0],
        sWareHouseId: mainConfig.filter(item => (item.sName.toLowerCase() === 'swarehouseid'))[0],
        sBillNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbillno'))[0],
        tCreateDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tcreatedate'))[0],
        sSenderId: mainConfig.filter(item => (item.sName.toLowerCase() === 'ssenderid'))[0],
        sMakePerson: mainConfig.filter(item => (item.sName.toLowerCase() === 'smakeperson'))[0],
        tDeliverDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tdeliverdate'))[0],
        sCurrency: mainConfig.filter(item => (item.sName.toLowerCase() === 'scurrency'))[0],
        dCurrencyRate: mainConfig.filter(item => (item.sName.toLowerCase() === 'dcurrencyrate'))[0],
        sSalesManId: mainConfig.filter(item => (item.sName.toLowerCase() === 'ssalesmanid'))[0],
        sGetPayId: mainConfig.filter(item => (item.sName.toLowerCase() === 'sgetpayid'))[0],
        tGetPayDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tgetpaydate'))[0],
        sMemo: mainConfig.filter(item => (item.sName.toLowerCase() === 'smemo'))[0],
        dAccountReceivable: mainConfig.filter(item => (item.sName.toLowerCase() === 'daccountreceivable'))[0],
        sDeliverId: mainConfig.filter(item => (item.sName.toLowerCase() === 'sdeliverid'))[0],
        sDeliverTo: mainConfig.filter(item => (item.sName.toLowerCase() === 'sdeliverto'))[0],
        sConsignee: mainConfig.filter(item => (item.sName.toLowerCase() === 'sconsignee'))[0],
        sConsigneeMobile: mainConfig.filter(item => (item.sName.toLowerCase() === 'sconsigneemobile'))[0],
        sLogisticsId: mainConfig.filter(item => (item.sName.toLowerCase() === 'slogisticsid'))[0],
        sLogisticsNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'slogisticsno'))[0],
        sLogisticsMobile: mainConfig.filter(item => (item.sName.toLowerCase() === 'slogisticsmobile'))[0],
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      sId, disabled, content, dataSet,
    } = nextProps;
    const { dataList } = content;
    const {
      sDataListTabId, returnType, urlData, loading, componentName,
    } = dataList;
    this.setState({ disabled, dataList: dataSet });
    if (this.state.sTabId === sDataListTabId && this.state.sTabId === nextProps.app.currentPane.key
      && this.state.componentName === componentName) {
      if (loading) return;
      if (returnType === 'data') {
        this.setState({
          dataList: urlData,
          sId: sId !== undefined ? sId : '',
        });
      }
      this.setState({ sId });
    }
    const mainConfig = this.state.masterConfig.gdsconfigformslave;
    if (Object.keys(mainConfig).length > 0) {
      const { sActiveId, app, form } = nextProps;
      const childProps = {
        app, form, sActiveId, sId, dataList, disabled,
      };
      const reserveContent = commonFunc.Reserve(mainConfig, childProps);
      this.setState({ reserveContent });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key &&
      this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const halfformItemLayout = { labelCol: { span: 10 }, wrapperCol: { span: 12 } };
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, onClose,
    } = this.props;
    const subjectDataSave = this.props.subjectDataSave.filter(item => item.handleType !== 'del');
    const {
      sCustomerId, sContacts, sPhone, sManualNo, sWareHouseId,
    } = this.state;
    const {
      sBillNo, tCreateDate, sMakePerson, tDeliverDate, sSenderId, sCurrency, dCurrencyRate,
    } = this.state;
    const {
      sSalesManId, sGetPayId, tGetPayDate, sMemo, dAccountReceivable,
    } = this.state;
    const {
      sDeliverId, sDeliverTo, sConsignee, sConsigneeMobile,
    } = this.state;
    const { sLogisticsId, sLogisticsNo, sLogisticsMobile } = this.state;
    const {
      dataList, sId, sActiveId, disabled, reserveContent, expand,
    } = this.state;
    const childProps = {
      app,
      form,
      sActiveId,
      dataList,
      sId,
      disabled,
      handleModalPane,
      handleSelectChange,
      dataName,
      dataType,
      onClose,
    };
    let sCustomerIdProps = '';
    if (subjectDataSave.length === 0) {
      sCustomerIdProps = { showConfig: sCustomerId, ...childProps, disabled: false };
    } else {
      sCustomerIdProps = { showConfig: sCustomerId, ...childProps, disabled: true };
    }
    const sContactsProps = { showConfig: sContacts, ...childProps };
    const sPhoneProps = { showConfig: sPhone, ...childProps };
    const sManualNoProps = { showConfig: sManualNo, ...childProps };
    let sWareHouseIdProps = '';
    if (dataList.sCustomerId === undefined || dataList.sCustomerId === '') {
      sWareHouseIdProps = { showConfig: sWareHouseId, ...childProps, disabled: true };
    } else {
      sWareHouseIdProps = { showConfig: sWareHouseId, ...childProps };
    }
    const sBillNoProps = { showConfig: sBillNo, ...childProps };
    const tCreateDateProps = { showConfig: tCreateDate, ...childProps };
    const sSenderIdProps = { showConfig: sSenderId, ...childProps };
    const sMakePersonProps = { showConfig: sMakePerson, ...childProps };
    const sCurrencyProps = { showConfig: sCurrency, ...childProps };
    const dCurrencyRateProps = { showConfig: dCurrencyRate, ...childProps };
    const tDeliverDateProps = { showConfig: tDeliverDate, ...childProps };
    const sSalesManIdProps = { showConfig: sSalesManId, ...childProps };
    const sGetPayIdProps = { showConfig: sGetPayId, ...childProps };
    const tGetPayDateProps = { showConfig: tGetPayDate, ...childProps };
    const sMemoProps = { showConfig: sMemo, ...childProps };
    const dAccountReceivableProps = { showConfig: dAccountReceivable, ...childProps };
    const sDeliverIdProps = { showConfig: sDeliverId, ...childProps };
    const sDeliverToProps = { showConfig: sDeliverTo, ...childProps };
    const sConsigneeProps = { showConfig: sConsignee, ...childProps };
    const sConsigneeMobileProps = { showConfig: sConsigneeMobile, ...childProps };
    const sLogisticsIdProps = { showConfig: sLogisticsId, ...childProps };
    const sLogisticsNoProps = { showConfig: sLogisticsNo, ...childProps };
    const sLogisticsMobileProps = { showConfig: sLogisticsMobile, ...childProps };
    return (
      <FormItem className={styles.searchMainForm}>
        <Row type="flex" style={{ height: expand ? 'auto' : '100px', overflow: 'hidden' }}>
          <Col
            span={6}
            order={sCustomerId.iOrder > 24 ? 24 : sCustomerId.iOrder}
            style={{ display: sCustomerId.bVisible ? 'block' : 'none' }}
          >
            <ShowType required sName="sCustomerId" showDefaultName="客户(*)" {...sCustomerIdProps} />
          </Col>
          <Col
            span={6}
            order={sContacts.iOrder > 24 ? 24 : sContacts.iOrder}
            style={{ display: sContacts.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sContacts" showDefaultName="联系人" {...sContactsProps} />
          </Col>
          <Col
            span={6}
            order={sPhone.iOrder > 24 ? 24 : sPhone.iOrder}
            style={{ display: sPhone.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sPhone" showDefaultName="电话" {...sPhoneProps} />
          </Col>
          <Col
            span={6}
            order={sManualNo.iOrder > 24 ? 24 : sManualNo.iOrder}
            style={{ display: sManualNo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sManualNo" showDefaultName="手工单号" {...sManualNoProps} />
          </Col>
          <Col
            span={6}
            order={sWareHouseId.iOrder > 24 ? 24 : sWareHouseId.iOrder}
            style={{ display: sWareHouseId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sWareHouseId" showDefaultName="仓库名称" {...sWareHouseIdProps} cudClose />
          </Col>
          <Col
            span={6}
            order={sSalesManId.iOrder > 24 ? 24 : sSalesManId.iOrder}
            style={{ display: sSalesManId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sSalesManId" showDefaultName="销售员" {...sSalesManIdProps} />
          </Col>
          <Col
            span={6}
            order={sGetPayId.iOrder > 24 ? 24 : sGetPayId.iOrder}
            style={{ display: sGetPayId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sGetPayId" showDefaultName="付款方式" {...sGetPayIdProps} />
          </Col>
          <Col
            span={6}
            order={tGetPayDate.iOrder > 24 ? 24 : tGetPayDate.iOrder}
            style={{ display: tGetPayDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tGetPayDate" showDefaultName="结算日期" {...tGetPayDateProps} />
          </Col>
          <Col
            span={6}
            order={sMemo.iOrder > 24 ? 24 : sMemo.iOrder}
            style={{ display: sMemo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sMemo" textArea showDefaultName="备注(双击)" {...sMemoProps} />
          </Col>
          <Col
            span={6}
            order={sBillNo.iOrder > 24 ? 24 : sBillNo.iOrder}
            style={{ display: sBillNo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sBillNo" showDefaultName="单据号" {...sBillNoProps} />
          </Col>
          <Col
            span={6}
            order={tCreateDate.iOrder > 24 ? 24 : tCreateDate.iOrder}
            style={{ display: tCreateDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tCreateDate" showDefaultName="制单日期" {...tCreateDateProps} />
          </Col>
          <Col
            span={6}
            order={sMakePerson.iOrder > 24 ? 24 : sMakePerson.iOrder}
            style={{ display: sMakePerson.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sMakePerson" showDefaultName="制单人" {...sMakePersonProps} />
          </Col>
          <Col
            span={6}
            order={tDeliverDate.iOrder > 24 ? 24 : tDeliverDate.iOrder}
            style={{ display: tDeliverDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tDeliverDate" showDefaultName="送货日期" {...tDeliverDateProps} />
          </Col>
          <Col
            span={6}
            order={sSenderId.iOrder > 24 ? 24 : sSenderId.iOrder}
            style={{ display: sSenderId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sSenderId" showDefaultName="送货人" {...sSenderIdProps} />
          </Col>
          <Col
            span={6}
            order={dAccountReceivable.iOrder > 24 ? 24 : dAccountReceivable.iOrder}
            style={{ display: dAccountReceivable.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dAccountReceivable" showDefaultName="应收款" {...dAccountReceivableProps} />
          </Col>
          <Col
            span={6}
            order={sCurrency.iOrder > 24 ? 24 : sCurrency.iOrder}
            style={{ display: sCurrency.bVisible ? 'block' : 'none' }}
          >
            <Row>
              <Col span={17}>
                <ShowType sName="sCurrency" showDefaultName="币别" {...sCurrencyProps} formItemLayout={halfformItemLayout} />
              </Col>
              <Col span={5}>
                <ShowType sName="dCurrencyRate" labelNo showDefaultName="汇率" {...dCurrencyRateProps} min={0} max={2147483647} />
              </Col>
            </Row>
          </Col>
          <Col
            span={6}
            order={sDeliverId.iOrder > 24 ? 24 : sDeliverId.iOrder}
            style={{ display: sDeliverId.bVisible ? 'block' : 'none' }}
          >
            <ShowType required sName="sDeliverId" showDefaultName="送货方式" {...sDeliverIdProps} />
          </Col>
          <Col
            span={6}
            order={sDeliverTo.iOrder > 24 ? 24 : sDeliverTo.iOrder}
            style={{ display: sDeliverTo.bVisible ? 'block' : 'none' }}
          >
            <ShowType required sName="sDeliverTo" textArea showDefaultName="送货到" {...sDeliverToProps} />
          </Col>
          <Col
            span={6}
            order={sConsignee.iOrder > 24 ? 24 : sConsignee.iOrder}
            style={{ display: sConsignee.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sConsignee" showDefaultName="收货人" {...sConsigneeProps} />
          </Col>
          <Col
            span={6}
            order={sConsigneeMobile.iOrder > 24 ? 24 : sConsigneeMobile.iOrder}
            style={{ display: sConsigneeMobile.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sConsigneeMobile" showDefaultName="收货人手机" {...sConsigneeMobileProps} />
          </Col>
          <Col
            span={6}
            order={sLogisticsId.iOrder > 24 ? 24 : sLogisticsId.iOrder}
            style={{ display: sLogisticsId.bVisible ? 'block' : 'none' }}
          >
            <ShowType required sName="sLogisticsId" textArea showDefaultName="物流公司" {...sLogisticsIdProps} />
          </Col>
          <Col
            span={6}
            order={sLogisticsNo.iOrder > 24 ? 24 : sLogisticsNo.iOrder}
            style={{ display: sLogisticsNo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sLogisticsNo" showDefaultName="物流单号" {...sLogisticsNoProps} />
          </Col>
          <Col
            span={6}
            order={sLogisticsMobile.iOrder > 24 ? 24 : sLogisticsMobile.iOrder}
            style={{ display: sLogisticsMobile.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sLogisticsMobile" showDefaultName="手机" {...sLogisticsMobileProps} />
          </Col>
          {reserveContent}
        </Row>
        <button className={styles.collapseA} onClick={this.handleToggle}>
          <span>{expand ? '缩略展示' : '显示全部'}</span><Icon type={expand ? 'up' : 'down'} />
        </button>
      </FormItem>
    );
  }
}

export default TabMainTableComponent;
